import React, { useEffect, useState } from "react";
import { Tabs, List, Image } from "react-vant";
import { useNavigate } from "react-router-dom";
import { getList } from "../../api";
import ListItem from "../../components/ListItem";
export interface ListRawState {
  id: string;
  title: string;
  auther: string;
  createDatetime: string;
  image: string;
  desc: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 页码
  const [_page, set_page] = useState(1);
  const [list, setList] = useState<ListRawState[]>([]);
  const [finished, setFinished] = useState(false);

  const fetchList = async () => {
    const resp = await getList({ _page: _page });
    const { code, data } = resp.data;
    if (code === 200) {
      setList([...list, ...data]);
      set_page(_page + 1);
    } else {
      setFinished(true);
    }
  };

  return (
    <div className="home">
      {/* 头部 */}
      <div className="header">
        <input
          type="text"
          placeholder="请搜索内容"
          onFocus={() => navigate("/search")}
        />
        <span onClick={() => navigate("/tags")}>标签</span>
        <span onClick={() => navigate("/sign")}>签到</span>
      </div>
      {/* tab 切换 */}
      <Tabs active={1}>
        <Tabs.TabPane title="关注">1</Tabs.TabPane>
        <Tabs.TabPane title="推荐">
          <List
            finished={finished}
            onLoad={fetchList}
            finishedText="没有更多数据了"
          >
            <div className="list">
              {list.map((v) => {
                return <ListItem key={v.id} v={v}></ListItem>;
              })}
            </div>
          </List>
        </Tabs.TabPane>
        <Tabs.TabPane title="热榜">3</Tabs.TabPane>
        <Tabs.TabPane title="关注">4</Tabs.TabPane>
        <Tabs.TabPane title="头条精选">5</Tabs.TabPane>
        <Tabs.TabPane title="后端">6</Tabs.TabPane>
      </Tabs>
      {/* 列表 */}
    </div>
  );
};

export default Index;
